<template>
  <div id="root">
    <div id="root-bottom">
      <el-row>
        <el-col :span="8" id="root-left">
          <el-card class="box-card">
            <div slot="header" class="clearfix" id="card">
              <span>公司最新通知</span>
            </div>
            <div>
              <h4>{{part_message.title}}</h4>
              <p>{{part_message.content}}</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="14" id="root-right">
          <!--          <el-table-->
          <!--            :data="tableData"-->
          <!--            style="width: 100%"-->
          <!--            :default-sort="{prop: 'created', order: 'descending'}"-->
          <!--            height="450"-->
          <!--          >-->
          <!--            <el-table-column-->
          <!--              prop="created"-->
          <!--              label="日期"-->
          <!--              sortable-->
          <!--              width="120">-->
          <!--            </el-table-column>-->
          <!--            <el-table-column-->
          <!--              prop="title"-->
          <!--              label="标题"-->
          <!--              with="120">-->
          <!--            </el-table-column>-->
          <!--            <el-table-column-->
          <!--              prop="content"-->
          <!--              label="内容"-->
          <!--              width="400"-->
          <!--             >-->
          <!--            </el-table-column>-->

          <!--          </el-table>-->
          <el-collapse v-model="activeNames" accordion>
            <el-collapse-item :title="`${dic.title}: ${dic.created}`" :name="dic.id" v-for="dic in tableData"
                              style="text-align: left">
              <p>{{dic.content}}</p>
            </el-collapse-item>
          </el-collapse>
          <div class="pagenation">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="total"
              :page-size="page_size"
              @prev-click="prevfun"
              @next-click="nextfun"
              @current-change="currentchange"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CompanyMessageView',
    data () {
      return {
        //所有数据的总数
        total: 5,
        //每页总数
        page_size: 1,//先设置给初始值，只给空字符串''会报typeerror
        part_message: {},
        tableData: [],
        activeNames:['1']
      }
    },
    mounted () {
      this.get_part_message()
      //获取所有的数据
      this.get_data()
    },
    methods: {
      formatter (row, column) {
        return row.address
      },
      //获取最新的通知
      get_part_message () {
        this.$axios({
          url: this.$settings.base_url + '/user/companymessage/',
          method: 'put',
        }).then(res => {
          this.part_message = res.data.data
        })
      },

      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/companymessage/?page=${page}`,
          method: 'get',
        }).then(res => {
          //获取到用户信息，赋值给变量
          this.tableData = res.data.results
          // this.prev = res.data.links.previous
          // this.next = res.data.links.next
          this.total = res.data.count
          this.page_size = res.data.page_size
        })
      },
      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      currentchange (value) {
        this.get_data(value)

      },

    }
  }
</script>

<style scoped>

  /*.box-card {*/
  /*  !*width: 480px;*!*/
  /*  height: 300px;*/
  /*}*/

  #root-left {
    margin-left: 20px;
    margin-top: 40px;
  }

  #root-right {
    margin-left: 30px;
    margin-top: 20px;
  }
</style>
